<template>
  <div>
    <p>Mouse position is at: {{ x }}, {{ y }}</p>
  </div>
</template>

<script setup>
// 在组件中使用组合式API实现鼠标跟踪功能
// import { ref, onMounted, onUnmounted } from 'vue'

// const x = ref(0)
// const y = ref(0)

// function update(event) {
//   x.value = event.pageX
//   y.value = event.pageY
// }
// onMounted(() => window.addEventListener('mousemove', update))
// onUnmounted(() => window.removeEventListener('mousemove', update))

// 如果我们想在多个组件中复用这个相同的逻辑呢？可以把这个逻辑以一个组合式函数的形式提取到外部文件中：
import { unref, ref } from 'vue'
import { useMouse } from '../utils/mouse.js'
const { x, y } = useMouse()

function useFeature(maybeRef) {
  // 若 maybeRef 确实是一个 ref，它的 .value 会被返回。否则，maybeRef 会被原样返回
  const value = unref(maybeRef)
  return value
}

// console.log(useFeature(1));
// console.log(useFeature(ref(0)));
</script>

<style scoped>

</style>